<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
    <style>
        body {
            text-decoration: none;
        }

        .el-row .r1 img {
            width: 30px;
            height: 30px;
            display: block;
            border-radius: 15px;
        }

        .el-row .r1 span {
            margin: 5px;
            color: rgba(127, 127, 127);
        }

        .el-row .r1 {
            height: 15px;
            line-height: 15px;
            display: flex;
            margin-bottom: 30px;
            margin-top: 10px;
        }

        .el-row .r2 {
            display: flex;
            flex-direction: row;
            margin-bottom: 5px;
        }

        .el-row .r2 .content {
            flex-grow: 1;
        }

        .el-row .r2 a {
            font-weight: bold;
            font-size: 20px;
            color: black;
        }

        .el-row .r2 p {
            font-size: 14px;
            width: 600px;
            height: 40px;
            overflow: hidden;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            text-overflow: ellipsis;
        }

        .el-row .r3 div {
            margin-right: 20px;
            color: rgba(127, 127, 127);
            line-height: 20px;
            height: 20px;
            display: flex;
        }

        .el-row .r3 {
            display: flex;
            margin-top: 20px;
        }

        .el-row .r3 img {
            height: 20px;
            width: 20px;
            display: block;
            line-height: 20px;
        }

        .background {
            background-image: url('http://rvg6mjj7z.hn-bkt.clouddn.com/img/background.jpg');
            background-repeat: no-repeat;
            background-size: cover;
            height: 100%;
        }

        .thumbnail {
            margin-left: 24px;
            width: 160px;
            height: 100px;
            border-radius: 10px;
        }

        .button-container {
            display: flex;
            justify-content: space-between;
        }

        .custom-button {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 10px;
            width: calc(50% - 10px);
        }

        .custom-button:last-child {
            margin-right: 0;
        }

        .avatar {
            margin-right: 20px; /* 或者你想要的任何间距 */
        }

        .nickname {
            margin-left: 20px; /* 或者你想要的任何间距 */
        }


    </style>
</head>
<body>
<div id="app">
    <el-container style="display: flex; flex-direction: column;">
        <my-header></my-header>
        <div class="background">
            <el-container style="flex: 1">
                <el-aside width="200px">
                    <el-card style="height: 1000px;margin-top: 10px;margin-left: 5px">
                        <el-menu>
                            <el-submenu index="1">
                                <template slot="title">
                                    <i class="el-icon-menu"></i>
                                    <span>文章</span>
                                </template>
                                <el-menu-item-group>
                                    <el-menu-item index="1-1" @click="loadContent(2)">前端</el-menu-item>
                                    <el-menu-item index="1-2" @click="loadContent(3)">后端</el-menu-item>
                                    <el-menu-item index="1-3" @click="loadContent(4)">大数据</el-menu-item>
                                </el-menu-item-group>
                            </el-submenu>
                            <el-submenu index="2">
                                <template slot="title">
                                    <i class="el-icon-menu"></i>
                                    <span>视频</span>
                                </template>
                                <el-menu-item-group>
                                    <el-menu-item index="2-1" @click="loadContent(6)">娱乐视频</el-menu-item>
                                    <el-menu-item index="2-2" @click="loadContent(7)">技术教程</el-menu-item>
                                </el-menu-item-group>
                            </el-submenu>
                        </el-menu>
                    </el-card>
                </el-aside>

                <el-main>
                    <el-row>
                        <el-col span="18">
                            <el-card>
                                <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal"
                                         @select="handleSelect">
                                    <el-menu-item index="1" @click="handleSelect(1)">最新</el-menu-item>
                                    <el-menu-item index="2" @click="handleSelect(2)">热门</el-menu-item>
                                </el-menu>
                                <el-row v-for="r in contentArr" gutter="20">
                                    <el-col span="16">
                                        <div class="r1">
                                            <img :src="r.userImgUrl">
                                            <span>{{r.nickname}}</span>
                                            <span>·</span>
                                            <span>{{ formatTime(r.createTime) }}</span>
                                        </div>
                                        <div class="r2">
                                            <div class="content">
                                                <a :href="'/contentDetail.html?id='+r.id" style="text-decoration: none">{{r.title}}</a>
                                                <p v-if="r.type==1">{{r.brief}}</p>
                                                <p v-else>{{r.videoDescribe}}</p>
                                            </div>
                                            <img class="thumbnail" :src="r.imgUrl">
                                        </div>
                                        <div class="r3">
                                            <div><img src="imgs/ic1.png"><span>{{r.viewCount}}</span></div>
                                            <div><img src="imgs/ic2.png"><span>{{r.likeCount}}</span></div>
                                            <div><img src="imgs/ic3.png"><span>{{r.commentCount}}</span></div>
                                        </div>
                                    </el-col>
                                </el-row>
                            </el-card>
                        </el-col>
                        <el-col span="5" offset="1">
                            <el-card>
                                <div>
                                    <template>
                                        <i class="el-icon-user"></i>
                                        <span>创作中心</span>
                                    </template>
                                </div>
                                <p></p>
                                <div class="button-container">
                                    <el-button type="primary" icon="el-icon-video-camera"
                                               @click="location.href='postArticle.html?type=2'" class="custom-button">
                                        发视频
                                    </el-button>
                                    <el-button type="primary" icon="el-icon-edit-outline"
                                               @click="location.href='postArticle.html?type=1'" class="custom-button">
                                        写文章
                                    </el-button>
                                </div>
                            </el-card>
                            <p></p>
                            <el-card>
                                <div>
                                    <template>
                                        <i class="el-icon-user"></i>
                                        <span>推荐作者</span>
                                    </template>
                                </div>
                                <el-row v-for="u in userArr" gutter="20" style="margin-top: 20px">
                                    <el-col span="4">
                                        <el-avatar :src="u.imgUrl" class="avatar"></el-avatar>
                                    </el-col>
                                    <el-col span="20">
                                        <p class="nickname">{{u.nickname}}</p>
                                    </el-col>
                                </el-row>
                            </el-card>
                        </el-col>
                    </el-row>
                    <el-backtop :bottom="100">
                        <div slot="default"
                             style="height: 60px; width: 60px; background-color: #f2f5f6; box-shadow: 0 0 6px rgba(0,0,0, .12); border-radius: 50%; display: flex; justify-content: center; align-items: center; color: #1989fa; font-size: 30px; cursor: pointer; transition: background-color .3s ease-in-out;">
                            <el-icon name="arrow-up"></el-icon>
                        </div>
                    </el-backtop>
                </el-main>
            </el-container>
        </div>
    </el-container>

</div>
</body>
<!-- import Vue before Element -->
<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
<!-- import JavaScript -->
<script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
<!--引入Axios-->
<script src="https://cdn.bootcss.com/axios/0.18.0/axios.min.js"></script>
<script src="js/my-header.js"></script>
<script>
    let v = new Vue({
        el: '#app',
        data: function () {
            return {
                activeIndex: '1',
                selectedCategory: null, // 横栏选择的值
                selectedSubmenu: null, // 侧栏选择的值
                contentArr: [],
                userArr: []
            }
        },
        methods: {
            handleSelect(submenuId) {
                this.selectedSubmenu = submenuId;
                this.fetchData();
            },
            loadContent(catId) {
                this.selectedCategory = catId;
                this.fetchData();
            },
            loadUserInfo() {
                axios.get("/v1/contents/userinfo").then(function (response) {
                    if (response.data.code == 1) {
                        v.userArr = response.data.data;
                    }
                })
            },
            fetchData() {
                if (this.selectedSubmenu && this.selectedCategory) {
                    axios.get("/v1/contents/index/" + this.selectedSubmenu + "/" + this.selectedCategory).then(function (response) {
                        if (response.data.code == 1) {
                            v.contentArr = response.data.data;
                        }
                    })
                }
            },
            formatTime(timestamp) {
                const currentTime = new Date();
                const createTime = new Date(timestamp);
                const timeDiff = currentTime - createTime;
                const seconds = Math.floor(timeDiff / 1000);
                const minutes = Math.floor(seconds / 60);
                const hours = Math.floor(minutes / 60);
                const days = Math.floor(hours / 24);

                if (days > 0) {
                    return days + "天前";
                } else if (hours > 0) {
                    return hours + "小时前";
                } else if (minutes > 0) {
                    return minutes + "分钟前";
                } else {
                    return "刚刚";
                }
            },
        },
        //
        created() {
            this.loadContent(2);
            this.handleSelect(1);
            this.loadUserInfo();
        }
    })
</script>
</html>